/*
 * @Author: likang xie 
 * @Date: 2018-06-11 11:27:34 
 * @Purpose: 程序公共样式与layui样式重置
 */
@import 'theme.scss';

html,
body {
  height: 100%;
  font-size: 10px;
}

pre {
  font-family: Arial, Helvetica, sans-serif
}

body {
  font-size: 1.4rem;
  color: #333;
  background-color: #f4f4f4;
}

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
}

::-webkit-scrollbar-thumb {
  background-color: hsla(220, 4%, 58%, .3);
  border-radius: 1rem;
}

// 公共样式
.main-content {
  background-color: #fff;
}

.iframe-content {
  min-width: 120rem;
}

.btgo-title {
  background-color: #eaeaea;
  padding: 2.5rem 3rem;
}

.btgo-content {
  padding: 2rem 3rem;
}

.table-data {
  position: relative;
  background-color: #fff;
  min-height: 25rem;
  padding-bottom: 7rem;

  &.not-min {
    min-height: 10rem;
    padding-bottom: 0;
  }
}

.layui-tab-content {
  position: relative;
  position: relative;
  background-color: #fff;
  min-height: 40rem;
  padding-bottom: 7rem !important;
}

.fz-title {
  font-size: 2.2rem;
  font-weight: bold;
}

.fz-big {
  font-size: 1.8rem;
}

.has-line {
  border-bottom: .1rem solid $border;
}

.page-wrapper {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  background-color: #fff;

  &.static {
    position: static;
  }
}

.max-content {
  max-width: 90rem;
}

.filter-fixed {
  .layui-btn-container {
    .layui-btn {
      padding: 2rem 4rem;
      line-height: 0;

      &:hover {
        background-color: $main;
        color: #fff;
      }
    }
  }
}

.layui-form {
  .key {
    span {
      color: red;
      margin-right: .5rem;
    }
  }
}

// Layui重置
.layui-layer.btgo-dialog {
  min-width: 40rem;

  .layui-layer-btn0 {
    background-color: $main;
    border: none;
  }
}

.set-dialog {
  width: 30rem;

  .layui-layer-title {
    padding: 0 1rem;
    text-align: center;
    background-color: #fff;
  }

  .form-container {
    padding: 2rem;
    padding-bottom: 0;
  }

  .input-row {
    margin-bottom: 1rem;

    .val {
      width: 23rem;

      input {
        height: 3.5rem;
      }
    }
  }

  .layui-layer-btn {
    padding-bottom: 2rem;

    a {
      padding: .6rem 4.5rem;

      &.layui-layer-btn0 {
        background-color: #dab364;
        border-color: #dab364;
      }
    }
  }

  p {
    line-height: 2;
    font-size: 1.6rem
  }
}

.tab-dialog {
  .layui-layer-tabli {
    text-align: center;
    padding: 3rem;
    padding-bottom: 0;

    .link {
      word-break: break-all;
    }
  }

  .layui-layer-title {
    cursor: pointer !important;
    padding: 0;

    span {
      display: inline-block;
      width: 25%;
      text-align: center;
      padding: 0 !important;
      background-color: #fff;

      &.layui-this {
        background-color: $main;
        color: #fff;
      }
    }
  }

  .layui-layer-btn {
    a {
      padding: .6rem 4.5rem;

      &.layui-layer-btn0 {
        background-color: #dab364;
        border-color: #dab364;
      }
    }
  }
}

.qrcode-dialog {
  .layui-layer-btn {
    padding-top: 0 !important;
  }

  .layui-layer-btn0 {
    background-color: #dab364 !important;
    border-color: #dab364 !important;
    padding: .5rem 3rem;
  }

  .qrcode {
    padding: 20px;
  }

  img {
    width: 100%;
  }
}

.tips-dialog {
  .layui-layer-content {
    padding: 2rem;
  }

  .layui-layer-btn {
    a.layui-layer-btn0 {
      background-color: #dab364 !important;
      border-color: #dab364 !important;
      padding: .5rem 3rem;
      width: 5rem;
    }

    a.layui-layer-btn1 {
      padding: .5rem 3rem;
      width: 5rem;
    }
  }
}

.detail-dialog {
  .layui-layer-btn0 {
    background-color: #dab364 !important;
    border-color: #dab364 !important;
  }
}

.fanli-dialog {
  a.layui-layer-btn0 {
    background-color: #dab364 !important;
    border-color: #dab364 !important;
    padding: .5rem 3rem;
    width: 5rem;
  }

  a.layui-layer-btn1 {
    padding: .5rem 3rem;
    width: 5rem;
  }

  .layui-layer-content {
    padding: 2rem;
    padding-bottom: .5rem;
    text-align: center;

    input {
      display: inline-block;
      width: 17rem;
    }
  }
}

// 上下图标
.layui-nav .layui-nav-more {
  width: 1.2rem;
  height: 1.2rem;
  background: url('/static/image/down.png') no-repeat center / 100%;
  border: none;
}

.layui-nav .layui-nav-mored,
.layui-nav-itemed>a .layui-nav-more {
  background: url('/static/image/up-active.png') no-repeat center / 100%;
  border: none;
  margin-top: -.7rem;
}

.layui-form-select .layui-edge {
  width: 1rem;
  height: 1rem;
  background: url('/static/image/down.png') no-repeat center / 100%;
  border: none;
  margin-top: -.5rem;
}

.layui-form-selected .layui-edge {
  margin-top: -.5rem;
}

// 菜单栏重置
.layui-side {
  position: absolute;
  width: 16rem;

  .layui-side-scroll {
    width: 18rem;
  }

  .layui-nav-tree {
    width: 16rem;
    background-color: #2b2419; // 选中的item样式

    .layui-this>a {
      background-color: #443620 !important;
      color: $main !important;
    }

    .layui-nav-item {
      border-bottom: 1px solid #443620; // 选中的模块样式

      &.layui-nav-itemed {
        background-color: #443620;
        opacity: 1;

        &>a {
          color: #e0daaa !important;
        }
      }

      // 鼠标移到item的样式
      a:hover {
        background-color: #443620 !important;
        color: #e0daaa !important;
      }

      .layui-nav-child {
        dd {
          position: relative;
          background-color: #443620 !important;
          padding-left: 2rem;

          a {
            color: rgba(255, 255, 255, 0.5) !important;
            overflow: inherit;
            background: url('/static/image/middle.png') no-repeat left top / 1.6rem 100%;

            &:hover {
              color: #e0daaa !important;
            }
          }

          &.layui-this {
            a {
              color: #e0daaa !important; // arc

              &::after {
                position: absolute;
                top: 0;
                left: -0.2rem;
                bottom: 0;
                margin: auto;
                content: '';
                width: .5rem;
                height: .5rem;
                border-radius: 50%;
                background-color: #e0daaa;
                z-index: 2;
              }
            }
          }

          &:first-child {
            a {
              background: url('/static/image/first.png') no-repeat left 2rem / 1.6rem 50%;
            }
          }

          &:last-child {
            a {
              background: url('/static/image/last.png') no-repeat left 0 / 1.6rem 50%;
            }
          }
        }
      }
    }

    a {
      color: #fff !important;
    }
  }
}

// Tab重置
.layui-tab {
  margin: 0;
}

.layui-tab-item {
  background-color: #fff;
}

.layui-bg-black {
  background-color: #2b2419 !important;
}

// 主题色重置
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this>a,
.layui-nav-tree .layui-this>a:hover,
.layui-nav-tree .layui-nav-bar {
  background-color: $main;
}

.layui-tab-title {
  border-bottom: none;
  background-color: #f4f4f4;
}

.layui-tab-title li {
  background-color: #efefef;
  padding: 0 2.5rem
}

.layui-tab-brief>.layui-tab-title .layui-this {
  background-color: $main;
  color: #fff;
}

.layui-tab-brief>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-title .layui-this:after {
  border-color: transparent;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: $main;
}

.layui-box a:hover {
  color: $main;
}

.layui-tab-content {
  background-color: #fff;
}

.layui-laydate-header i.laydate-prev-y:hover,
.layui-laydate-header i.laydate-prev-m:hover,
.layui-laydate-header i.laydate-next-y:hover,
.layui-laydate-header i.laydate-next-m:hover,
.layui-laydate-header .laydate-set-ym span:hover {
  color: $main
}

// 表单重置
.layui-form-select {
  display: inline-block;
  width: 15rem;

  input {
    cursor: text !important;
  }
}

.layui-input {
  height: 3.2rem;
}

.layui-btn {
  font-size: 1.3rem;
  background-color: $main;
  padding: 0 1rem;
  max-height: 3.2rem;
  line-height: 3.2rem;

  &.search-btn {
    padding: 0 2rem;
    line-height: 3rem;
    max-height: 3.2rem;
    vertical-align: middle;
  }

  &.layui-btn-primary {
    background-color: #fff;

    &:hover {
      border-color: $main;
      color: $main;
    }

    &.active {
      border-color: $main;
      color: $main;
    }
  }
}

.layui-form-onswitch {
  border-color: $main;
  background-color: $main;
}

// 分页重置
.layui-laypage {
  line-height: 2.4rem;

  a,
  span {
    height: 2.4rem;
    line-height: 2.6rem;
    margin: 0 .5rem;
    padding: 0 1rem;
  }

  .layui-input {
    height: 2.4rem;
    margin-top: .3rem
  }

  .layui-laypage-btn {
    height: 2.4rem;
    line-height: 2.4rem;
    margin-top: .3rem
  }

  .layui-laypage-spr {
    line-height: 2.4rem;
    border: none;
    padding: 0;
  }
}

// 下拉框重置
.layui-form-select dl {
  top: 3.5rem;
}

.layui-form-select dl dd.layui-this {
  background-color: #fff;
  color: $main;
}

.layui-form-select dl dd,
.layui-form-select dl dt {
  line-height: 2.5;
}

.layui-form-select dl dd:hover,
.layui-form-select dl dt:hover {
  background-color: #fff;
  color: $main;
}

.layui-laypage input:focus {
  border-color: $main !important;
}

.layui-laydate .layui-this {
  background-color: $main !important;
}

.laydate-footer-btns span:hover {
  color: $main !important;
}

input[type="number"] {
  width: 7rem;
  height: 2rem;
  text-indent: 1rem;
}

.layui-form-radio>i:hover,
.layui-form-radioed>i {
  color: $main
}

.layui-form-radio>i {
  font-size: 1.6rem;
}

.table-data {
  .layui-table {
    margin-top: 2rem;
    position: relative;

    .total-bg {
      height: 7rem;
    }

    .total-data {
      position: absolute;
      top: 3.8rem;
      left: 0;
      width: 100%;

      td {
        box-sizing: border-box;
        background-color: rgba(218, 180, 100, 0.08); // background-color: #fcf9f4;
        position: absolute;
        left: 0;
        right: 2rem;
        width: 100%;
        height: 7rem;
        line-height: 4.5rem;
        text-align: center;
        border: none;

        .layui-inline {
          margin-right: 2rem;
          font-size: 1.8rem
        }
      }
    }
  }
}

// 表格重置
.layui-table {
  color: #333;

  thead {
    tr {
      background-color: #eaeaea;
    }
  }

  tbody {
    tr {
      &:hover {
        background-color: #f9f9f9 !important;
      }
    }
  }

  th {
    text-align: center;
  }

  td {
    text-align: center;
    border: none;
    border-bottom: .1rem solid #e6e6e6;
    padding: 1.2rem;

    .td-line {
      display: block;
      margin: auto;
      width: 5rem;
      height: .1rem;
      background-color: #e6e6e6;
    }

    input {
      margin: auto
    }
  }

  .link-btn {
    color: $main;

    &:hover {
      text-decoration: underline;
    }
  }
}

.small-btn {
  max-height: 2.8rem;
  line-height: 2.8rem;
}

.small-btn-mt {
  margin-top: .5rem;
}

.filter-custom {
  margin-left: 2.5rem !important;
}

// theme
@each $name,
$color in (main: $main,
border: $border) {
  .cl-#{$name} {
    color: $color;
  }
}

// 边距
@mixin m($t,
$r,
$b,
$l) {
  margin: 1rem * $t 1rem * $r 1rem * $b 1rem * $l;
}

@mixin p($t,
$r,
$b,
$l) {
  padding: 1rem * $t 1rem * $r 1rem * $b 1rem * $l;
}

$pm: 10;

@while $pm>0 {
  .mt-#{$pm*5} {
    @include m($pm,
    0,
    0,
    0);
  }

  .mr-#{$pm*5} {
    @include m(0,
    $pm,
    0,
    0);
  }

  .mb-#{$pm*5} {
    @include m(0,
    0,
    $pm,
    0);
  }

  .ml-#{$pm*5} {
    @include m(0,
    0,
    0,
    $pm);
  }

  .pt-#{$pm*5} {
    @include p($pm,
    0,
    0,
    0);
  }

  .pr-#{$pm*5} {
    @include p(0,
    $pm,
    0,
    0);
  }

  .pb-#{$pm*5} {
    @include p(0,
    0,
    $pm,
    0);
  }

  .pl-#{$pm*5} {
    @include p(0,
    0,
    0,
    $pm);
  }

  $pm: $pm - 1;
}

// 字号
@for $i from 10 through 30 {
  .fz-#{$i} {
    font-size: 1rem * $i / 10;
  }
}